<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
import { ViewData } from '@/api/types/userType'
import { useValidator } from '@/hooks/web/useValidator'
import { Delete } from '@element-plus/icons-vue'
import { ElTable, ElDivider, ElTableColumn, ElButton, ElInputNumber, ElUpload, ElLink } from 'element-plus'
import { ref } from 'vue'
import api from '@/api'
const imageServer = 'http://focus.xinshengcorp.com/service/formcenter-service/upload/publicApi/file/'
const { uploadFile } = api
const { required } = useValidator()

const props = defineProps({
    currentRow: { 
        type: Object as PropType<Nullable<ViewData>>,
        default: () => null
    },
    formSchema: {
        type: Array as PropType<FormSchema[]>,
        default: () => []
    }
})
const data = ref([])
const tableObject = ref()
const { register, methods, elFormRef } = useForm({ schema: props.formSchema })
const rules = reactive({
    name: [required()]
})

watch(
    () => props.currentRow,
    (currentRow) => {
        if (!currentRow) return
        const { setValues } = methods
        setValues(currentRow)
        data.value = currentRow.files
        elFormRef
    },
    {
        deep: true,
        immediate: true
    }
)
const addRow = () => {
    if (!data.value) data.value = []
    data.value.push({ minScore: 0, maxScore: 0, files: [] })
}
const delRow = () => {
    data.value = data.value.filter((obj) => tableObject.value.indexOf(obj) < 0)
}
const handlerUpload = async (o, row) => {
    const res = await uploadFile({ files: o.file })
    if (!row.files) row.files = []
    row.files.push(res.data[0])
}
const removeFile = (row, file) => {
    row.files = row.files.filter((f) => f.id != file.id)
}
const getFormData = async () => {
    const formData = await methods.getFormData()
    formData.files = JSON.stringify(data.value)
    console.log(formData)
    return formData
}
defineExpose({
    elFormRef,
    getFormData: getFormData
})
</script>

<template>
    <Form :rules="rules" @register="register">
        <template #userName v-if="currentRow != null">
            <span>{{ currentRow?.userName }} </span>
        </template>
    </Form>
    <ElDivider>课程文件信息</ElDivider>
    <div class="mb-1">
        <ElButton size="small" type="primary" @click="addRow">添加</ElButton>
        <ElButton size="small" type="danger" @click="delRow">删除</ElButton>
    </div>
    <ElTable
        border
        size="small"
        :data="data"
        @selection-change="
            (val) => {
                tableObject = val
            }
        "
    >
        <ElTableColumn type="selection" />
        <ElTableColumn type="index" label="序号" />
        <ElTableColumn prop="minScore" label="最低分">
            <template #default="scope">
                <ElInputNumber v-model="scope.row.minScore" />
            </template>
        </ElTableColumn>
        <ElTableColumn prop="maxScore" label="最高分">
            <template #default="scope">
                <ElInputNumber v-model="scope.row.maxScore" />
            </template>
        </ElTableColumn>
        <ElTableColumn prop="fileName" label="文件">
            <template #default="scope">
                <ElUpload
                    :showFileList="false"
                    :multiple="true"
                    action=""
                    accept=".jpg,.jpeg,.png,.pdf"
                    :http-request="
                        (e) => {
                            return handlerUpload(e, scope.row)
                        }
                    "
                >
                    <ElButton type="primary">上传文件</ElButton>
                </ElUpload>
                <div v-for="item of scope.row.files" :key="item.id"
                    ><ElButton
                        @click="removeFile(scope.row, item)"
                        type="danger"
                        :icon="Delete"
                        circle
                        style="margin-right: 10px"
                    />
                    <ElLink :href='imageServer+item.id+item.type' target="_blank">{{ item.name }}</ElLink>
                </div>
            </template>
        </ElTableColumn>
        <ElTableColumn prop="" label="操作" width="200px">
            <template #default="scope">
                <ElButton
                    size="small"
                    type="danger"
                    @click="
                        () => {
                            tableObject = [scope.row]
                            delRow()
                        }
                    "
                >
                    删除
                </ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
</template>
